import { Layout , Menu  } from 'antd';
import { useContext ,useEffect,useState } from 'react';
import { GolBalContext } from '@/redux/index';
import Logo from "@/assets/logo.png"
import { routerList } from '@/utils/router';
import iData from  "@/mobx/info"
import {observer} from "mobx-react"
import {history} from "umi"
import {changePathname} from "@/redux/action"
const {Sider } = Layout;
const { SubMenu } = Menu;
export default observer(function MenuPage({location}){
  // 初始化高亮 

  // console.log(location)
  useEffect(()=>{
    console.log("menu - menu - menu ")
    // setPathname([location.pathname])
  },[])
  const {state,dispatch} = useContext(GolBalContext)
  const handleMenuItemClick = (item)=>{
    // console.log(item)
    history.push(item.key)
    dispatch(changePathname(item.key))
  } 
  // 递归渲染menu 
  const renderMenuItem = (list)=>{
    const {userInfo} = iData  // userInfo.role 
    if(userInfo){
      return list.map((item,index)=>{
         if(item.children){
            if(userInfo.role < item.role){   // 权限问题 
              return null 
            }else{
              // 子菜单
              return (
                <SubMenu key={item.path} icon={item.icon} title={item.text}>
                    {renderMenuItem(item.children) }
                </SubMenu>
              )   
            } 
         } else{
           if(userInfo.role < item.role){
            return null
           }else{
            return (
              <Menu.Item key={item.path} icon={item.icon}>
                 {item.text}
              </Menu.Item>
             )
           }
         }
      })
    }else{
      return null; 
    }
  }
   return (
    <Sider
      trigger={null} 
      collapsible 
      collapsed={state.get("collapsed")}
    >
      <div className="logo" style={{width:'100%'}}>
        <img src={Logo} className="imglogo" alt=""  style={{width:'90%',margin:"30px auto 20px"}}/>
        <Menu
          theme="dark" 
          mode="inline" 
          defaultSelectedKeys={[state.get('pathname')]}
          defaultOpenKeys={[location.pathname.split("/").splice(0,3).join("/")]}
          onClick={handleMenuItemClick}

        >
            {renderMenuItem(routerList)}
        </Menu>
      </div>
    </Sider>
   )
})